<html>
  <head>
    <meta charset="utf-8">
    <title>welcome to hiproxy</title>
    <style>
      html, body {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        margin: 0;
        font-family: Helvetica, Tahoma, Arial;
      }

      .layout {
        flex: 1;
        display: flex;
        flex-direction: row;
        align-items: stretch;
      }

      .left {
        display: flex;
        flex-direction: column;
        width: 200px;
        background: #303030;
      }

      .left .logo {
        height: 70px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .left .logo img {
        width: 45px;
      }

      .left .menu {
        padding: 0;
        margin: 0;
        flex: 1;
      }

      .left .menu .menu-item {
        list-style: none;
        margin: 0;
        padding: 0 20px;
        height: 42px;
        display: flex;
        flex-direction: row;
        align-items: center;
        transition: background-color 0.5s;
      }

      .left .menu .menu-item:hover, .left .menu .menu-item.active {
        background: #108ee9;
      }

      .left .menu .menu-item a {
        font-size: 13px;
        text-decoration: none;
        color: rgba(255, 255, 255, 0.67);
        transition: color 0.5s;
      }

      .left .menu .menu-item:hover a, .left .menu .menu-item.active a {
        color: #ffffff;
      }

      .left .menu .menu-item img {
        width: 20px;
        margin-right: 5px;
      }

      .left .footer {
        height: 30px;
        text-align: center;
        line-height: 30px;
        font-size: 12px;
        color: rgba(255, 255,255, 0.5);
      }

      .right {
        flex: 1;
        display: flex;
        flex-direction: column;
      }

      .right .header {
        display: flex;
        padding: 0 30px;
        flex-direction: row;
        align-items: center;
        height: 70px;
        border-bottom: 1px solid rgb(216, 214, 214);
      }

      .right .header .server-infos {
        flex: 1;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: row;
      }

      .right .header .server-infos .info-item {
        list-style: none;
        margin: 0;
        padding: 0;
        font-size: 14px;
        margin-right: 30px;
      }

      .right .header .server-infos a {
        text-decoration: underline;
        color: #A6ACB1;
      }

      .right .header .server-infos .info-item .title {
        font-weight: bold;
      }

      .right .header .server-infos .info-item .content {
        color: #A6ACB1;
        max-width: 220px;
        white-space: nowrap;        
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .right .header .buttons button {
        height: 32px;
        line-height: 32px;
        padding: 0 10px;
        font-size: 14px;
        font-weight: 400;
        color: #fff;
        background-color: #108ee9;
        border: 0;
        border-radius: 4px;
        outline: 0;
        transition: background-color 0.5s;
      }

      .right .header .buttons button:hover {
        background-color: #49a9ee;
      }

      .right .body {
        background: #F6F7FB;
        flex: 1;
        overflow: auto;
      }

      .card-list {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        padding: 20px;
        margin: 0;
        align-items: flex-start;
      }

      .card {
        width: 250px;
        height: 240px;
        margin: 20px;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        border-radius: 5px;
        list-style: none;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
        background: #ffffff;
        overflow-x: hidden;
      }

      .card .plugin-header {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20px;
        flex: 1;     
      }

      .card .plugin-header img {
        height: 80px;
        max-width: 200px;
      }

      .card .plugin-header .default-logo {
        height: 80px;
        width: 80px;
        border-radius: 50%;
        background: #D8E6FE;
        font-size: 45px;
        text-align: center;
        line-height: 80px;
        color: white;
      }

      .card .plugin-header h2 {
        margin: 5px;
        font-size: 16px;
      }

      .card .plugin-header .plugin-describe {
        color: #BDC2C7;
        margin: 5px 0;
        font-size: 14px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        line-height: 16px;     /* fallback */
        max-height: 32px;      /* fallback */
        -webkit-line-clamp: 2; /* number of lines to show */
        -webkit-box-orient: vertical;
      }

      .card .plugin-footer {
        display: flex;
        flex-direction: row;
        margin-left: -1px;
        overflow: hidden;
      }

      .card .plugin-footer a {
        flex: 1;
        display: flex;
        font-size: 14px;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        height: 45px;
        line-height: 45px;
        border-top: 1px solid #F1F2F6;
        border-left: 1px solid #F1F2F6;
        text-align: center;
        text-decoration: none;
        color: #A0A6AC;
      }

      .card .plugin-footer a:hover {
        color: #659AFB;
      }

      .card .plugin-footer a img {
        width: 18px;
        height: 18px;
        margin-right: 5px;
      }
    </style>
  </head>
  <body>
    <div class="layout">
      <div class="left">
        <div class="logo">
            <img src="{{baseURL}}/logo-light" alt="">
        </div>
        <ul class="menu">
          <li class="menu-item active">
            <img src="">
            <a target="_blank" href="/">welcome hiproxy</a>
          </li>
          <li class="menu-item">
            <img src="">
            <a target="_blank" href="https://github.com/hiproxy/">Github Group</a>
          </li>
          <li class="menu-item">
            <img src="">
            <a target="_blank" href="https://github.com/hiproxy/hiproxy/issues/new">New Issues</a>
          </li>
          <li class="menu-item">
            <img src="">
            <a target="_blank" href="http://hiproxy.org/">Documentation</a>
          </li>
        </ul>
        <footer class="footer">
          Version: {{package.version}}
        </footer>
      </div>
      <div class="right">
        <header class="header">
          <ul class="server-infos">
            <li class="info-item">
              <div class="title">HTTP Port</div>
              <div class="content">{{httpPort}}</div>
            </li>
            <li class="info-item">
              <div class="title">HTTPS Port</div>
              <div class="content">{{httpsPort}}</div>
            </li>
            <li class="info-item">
              <div class="title">Workspace</div>
              <div class="content" title="{{workspace}}">{{workspace}}</div>
            </li>
            <li class="info-item">
              <div class="title">PAC File</div>
              <div class="content">
                <a href="{{baseURL}}/proxy.pac?type=view" target="_blank">
                  {{baseURL}}/proxy.pac
                </a>
              </div>
            </li>
            <li class="info-item">
              <div class="title">Certificate</div>
              <div class="content">
                <a href="{{baseURL}}/ssl-certificate">
                  Download Root Certificate
                </a>
              </div>
            </li>
          </ul>
          <div class="buttons">
            <button onclick="(new Image()).src='{{baseURL}}/api?action=open'">Open Browser</button>
          </div>
        </header>
        <section class="body">
          <ul class="card-list">
            <li class="card">
              <div class="plugin-header">
                <img src="https://avatars2.githubusercontent.com/u/29273417?s=200&v=4" alt="">
                <h2>hiproxy</h2>
                <p class="plugin-describe">A light-weight and powerful proxy tool</p>
              </div>
              <div class="plugin-footer">
                <a href="https://github.com/hiproxy/hiproxy" target="_blank">
                  <img src="">
                  Github
                </a>
                <a href="{{baseURL}}" target="_blank">
                  <img src="">
                  Open
                </a>
              </div>
            </li>
            {{#plugins}}
              <li class="card">
                <div class="plugin-header">
                  {{#logoURL}}
                    <img src="{{logoURL}}" alt="{{name}}">
                  {{/logoURL}}
                  {{^logoURL}}
                    <div class="default-logo" style="background: {{logoColor}}">{{logoLetter}}</div>
                  {{/logoURL}}
                  <h2>{{displayName}}</h2>
                  <p class="plugin-describe">{{#description}}{{description}}{{/description}}{{^description}}Did not find the description information{{/description}}</p>
                </div>
                <div class="plugin-footer">
                  <a href="{{github}}" target="_blank">
                    <img src="">
                    Github
                  </a>
                  <a href="{{root}}" target="_blank">
                    <img src="">
                    Open
                  </a>
                </div>
              </li>
            {{/plugins}}
          </ul>
        </section>
      </div>
    </div>
  </body>
</html>
